<template>
  <div>
    <el-dialog title="新增店铺" :visible.sync="dialogFormVisible">
      <el-form
        :model="shop"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="门店所在区域" prop="regionData">
          <el-cascader
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
            ref="cas"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="shop.address" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="管理区域" prop="area" >
          <el-input v-model="shop.area" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="所在区" prop="oparate_area">
            <el-input v-model="shop.oparate_area" placeholder="所在区" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="门店名称" prop="name">
          <el-input v-model="shop.name" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="业态" prop="type">
          <el-input v-model="shop.type" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="配送属性" prop="type">
          <el-radio-group v-model="shop.type">
            <el-checkbox label="到店自提" name="type"></el-checkbox>
            <el-checkbox label="门店配送" name="type"></el-checkbox>
            <el-checkbox label="第三方配送" name="type"></el-checkbox>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="营业时间" required>
          <el-input v-model="shop.open_time" style="width: 50%"></el-input>----
          <el-input v-model="shop.open_time" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="支持预定" prop="delevery_type" required>
          <el-switch v-model="shop.delevery_type"></el-switch>
        </el-form-item>
        <el-form-item label="预定间隔时间" prop="reserve_interval" required>
          <!-- <el-select v-model="shop.reserve_interval" placeholder="请选择">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="备货时长" prop="reserve_range" required>
          <!-- <el-select v-model="shop.reserve_range" placeholder="请选择">
            <el-option
              v-for="item in time"
              :key="item.val"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="位置坐标">
          <input type="text"  @change="handler" v-model="location.lng"  />--
          <input type="text" v-model="location.lat"  />
          <baidu-map
            class="bm-view"
            @click="zoomchange"
            @moving="syncCenterAndZoom"
            @moveend="syncCenterAndZoom"
            @zoomend="syncCenterAndZoom"
            :center="{ lng:location.lng, lat: location.lat }"
            :zoom="zoom"
            :scroll-whell-zoom="true"
          >
          <bm-local-search :keyword="keyword" :auto-viewport="true"></bm-local-search>
          </baidu-map>
        </el-form-item>
        <el-form-item style="margin:10px" label="门店图片"> 
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="联系人" prop="contact_name">
          <el-input v-model="shop.contact_name" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contact_phone">
          <el-input v-model="shop.contact_phone" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="是否上线">
          <el-switch v-model="shop.delevery_type"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addShop()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { regionData,CodeToText } from "element-china-area-data";
import { AddShop } from "@/api/shop";
export default {
  props: {
    // 父组件传递的参数visible（控制是否显示弹框）
    visible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    // 监听visible更新是否显示弹框
    visible: {
      handler() {
        this.dialogFormVisible = this.visible;
      },
    },
    // 监听是否显示弹框的值，通过事件的方式更新父组件的visible值
    dialogFormVisible: {
      handler() {
        this.$emit("update:visible", this.dialogFormVisible);
      },
    },
  },
  data() {
    return {
      // 是否显示弹框
      dialogFormVisible: this.visible,
      shop: {
       
      },
      last:[],
      zoom:17,
      //上传图片
      dialogImageUrl: "",
      dialogVisible: false,
      // option: [
      //   {
      //     value: "选项1",
      //     label: "10-60分钟",
      //   },
      //   {
      //     value: "选项2",
      //     label: "10-60小时",
      //   },
      // ],
      value: "",
      // time: [
      //   {
      //     value: "选项1",
      //     label: "10-60分钟",
      //   },
      //   {
      //     value: "选项2",
      //     label: "10-60小时",
      //   },
      // ],
      val: "",
      keyword:'',
      //省市级联数据
      options: regionData,
      selectedOptions: [],
      value1: new Date(2016, 9, 10, 18, 40),
      value2: new Date(2016, 9, 10, 18, 40),
      location:{
        lat:116.294625,
        lng:39.961627
      }
    };
  },
  created(){
    // this.shop.oparate_area=this.last[0]
    // console.log(this.shop.oparate_area)
    
  },
  methods: {
    currStationChange(val){
        console.log("currStationChange",val);
        this.keyword=val
    },
    syncCenterAndZoom(e){
        const {lng,lat}=e.target.getCenter()
        this.location.lng=lng;
        this.location.lat=lat;
        this.shop.lat=lat;
        this.shop.lon=lng;
        this.zoom=e.target.getZoom()

    },
    zoomchange(e) {
      // this.map.setCenterAndZoom(this.point, this.zoom)
      console.log(e, "地图");
      this.lat = e.point.lat;
      this.lng = e.point.lng;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    addShop() {
      AddShop(this.shop).then((res) => {
        if (res && res.data && res.data.code === 0) {
          this.shop = res.data.data;
          this.$message({
            type: "success",
            message: "新增成功",
          });
          location.reload()
          // this.dialogFormVisible=false
          
        }
        // 关闭弹框
        this.dialogFormVisible = false;
      });
      // GetShop({ id: this.$route.params.id })
      //     .then(res => {
      //         if (res && res.data && res.data.code == 0) {
      //             this.shop = res.data.data[0];
      //         }
      //     })
    },
    handleChange(value) {
    // 选择完成之后，它最后的值其实是一个区域码，并不是文字，需要自己用CodeToText处理数据
      console.log(value, "省市级联的编号");//['110000', '110100', '110101']
      let codeStr=value.join(',')
      console.log(codeStr,'字符串');//110000,110100,110101
      let name=this.getCodeToText(codeStr,value)
      console.log(name,"名字");//北京市/市辖区/东城区
      this.keyword=name; 
       this.last = name.split('/').slice(-1)
      console.log(this.last[0],"最后一个区编号");
      console.log(this.last,16231213131654);
      this.shop.oparate_area=this.last[0]

      
     

    },
    handler({BMap,map}){
        let point=new BMap.Point(this.location.lng,this.location.lat)
        map.centerAndZoom(point,13)
        var marker=new BMap.Marker(point)
        map.addOverlay(marker)
        var circle=new BMap.Circle(point,6,{strokeColor:'blue'})
        map.addOverlay(circle)
    },

    getCodeToText(codeStr, codeArray) {
      if (null === codeStr && null === codeArray) {
        return null;
      } else if (null === codeArray) {
        codeArray = codeStr.split(",");
      }

      let area = "";
     
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]];
          break;
        case 2:
          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
          break;
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            "/" +
            CodeToText[codeArray[1]] +
            "/" +
            CodeToText[codeArray[2]];
          break;
        default:
          break;
      }
      return area;
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style>
.bm-view {
  width: 50%;
  height: 400px;
}
</style>
